<script setup>
import { ref } from 'vue'
// import { Edit } from '@element-plus/icons-vue'
// import { placeholderSign } from 'element-plus/es/components/table-v2/src/private'
import {
  // GetDefectExcelService
  getFourScoreList
} from '../../api/clothrequest'
import SelectPlant from './components/SelectPlant.vue'
import SelectMathine from './components/SelectMathine.vue'
import SelectCloth from './components/SelectCloth.vue'
import SelectWorkShop from './components/SelectWorkShop.vue'
import { changTime } from '@/utils/format.js'
import { useParms } from '@/stores'
import { useUserStore } from '@/stores'
const userStore = useUserStore()
const day = ref([])
const total = ref(0)
const clothfourUrl = ref()
const params = ref({
  pageCurrent: 1, // 当前页
  pageSize: 20, // 当前生效的每页条数
  id: '',
  factoryId: '', //厂房号
  checkStartDate: '', //搜索开始时间
  checkEndDate: '', //搜索结束时间
  deviceCode: '', //机台号
})
const checkDate = ref()
// 布匹数据
const clothfourlist = ref([])
// 重置搜索数据
const useparms = useParms()
useparms.emptyParams()
const loading = ref()
// 获取四分制数据
const getFourList = async () => {
  loading.value = true
  const res = await getFourScoreList(params.value)
  if(res.data.data!==null)
  {
    clothfourlist.value = res.data.data.records
    total.value = Number(res.data.data.total)
    loading.value = false
    return 0
  }
  clothfourlist.value=[]
  total.value=0
  loading.value = false
}

getFourList()
const onCurrentChange = (page) => {
  // 更新当前页
  params.value.pageCurrent = page
  console.log(params)
  // 基于最新的当前页，渲染数据
  getFourList()
}
// 搜索逻辑 => 按照最新的条件，重新检索，从第一页开始展示
const onSearch = () => {
  params.value.pageCurrent = 1 // 重置页面
  if (checkDate.value) {
    params.value.checkStartDate = changTime(checkDate.value[0])
  }
  if (checkDate.value) {
    params.value.checkEndDate = changTime(checkDate.value[1])
  }
  getFourList()
}
const changeTime = ($event) => {
  day.value = $event
  console.log($event[0])
  useparms.params.checkStartDate = changTime($event[0])
  useparms.params.checkEndDate = changTime($event[1])
  console.log(useParms.params)
}
// 重置逻辑 => 将筛选条件清空，重新检索，从第一页开始展示
const onReset = () => {
  params.value.pageCurrent = 1 // 重置页面
  params.value.factoryId = ''
  params.value.id = ''
  params.value.deviceCode = ''
  checkDate.value = ''
  params.value.checkStartDate = ''
  params.value.checkEndDate = ''
  getFourList()
}
// 下载疵点excel表格
</script>

<template>
  <page-container title="四分制表格" class="container">

    <el-form inline>
      <el-form-item v-if="userStore.user.roleId === 1" label="厂房编号:">
        <select-plant v-model="params.factoryId"></select-plant>
      </el-form-item>
      <el-form-item
        v-if="
          userStore.user.roleId === 1 ||
          userStore.user.roleId === 2 ||
          userStore.user.roleId === 3
        "
        label="车间号:"
      >
        <select-work-shop v-model="params.id" style="width: 100px"></select-work-shop>
      </el-form-item>
      <el-form-item label="机台号:">
        <select-mathine v-model="params.deviceCode" style="width: 150px"></select-mathine>
      </el-form-item>
      <el-form-item label="检测时间:">
        <el-date-picker
          v-model="checkDate"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          type="datetimerange"
          size="default"
          @change="changeTime($event)"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="onSearch" class="select-button">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      :data="clothfourlist"
      style="width: 100%"
      height="550px"
    >
      <el-table-column label="序号" type="index" ></el-table-column>
      <el-table-column label="布票号" width="180px">
        <template #default="{ row }">
          <span v-if="!row.hasDetails">{{ row.buFeiCode }}</span>
          <el-button v-else type="text">
          <el-link :underline="false" class="link" :href="'http://8.134.153.179/MMZN/ClothSheetFourScore/download/R_ClothSheetDetailFourScore?serialno='+row.serialNo+'&deviceCode='+row.deviceCode"
              >{{ row.buFeiCode }}</el-link
            >
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="qualityLevel" label="品质等级"></el-table-column>
      <el-table-column prop="deviceCode" label="机台号"></el-table-column>
      <el-table-column label="检测时间">
        <template #default="{ row }"><span>{{
            changTime(row.checkDate)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="clothCode" label="布匹编号"></el-table-column>
      <!-- <el-table-column prop="clothType" label="布的种类"></el-table-column> -->
      <el-table-column
        prop="circleSum"
        label="当前报告总圈数"
      ></el-table-column>
      <!-- <el-table-column prop="turnSum" label="当前报告总轮数"></el-table-column> -->
      <!-- <el-table-column prop="defectTrunSum" label="当前报告总瑕疵数轮数"></el-table-column> -->
      <el-table-column prop="defectPicSum" label="当前报告总瑕疵图片数"></el-table-column>
      
      <el-table-column prop="stopSum" label="总停机数"></el-table-column>
      <el-table-column prop="orderCode" label="订单号"></el-table-column>
      <!-- <el-table-column prop="workerCode" label="工单号"></el-table-column> -->
      <el-table-column prop="clothInspector" label="验布人"></el-table-column>
      <el-table-column prop="weaver" label="织布人"></el-table-column>

      <!-- <el-table-column prop="area" label="布面面积"></el-table-column>
      <el-table-column prop="weight" label="重量"></el-table-column>
      <el-table-column prop="cylinderCode" label="缸号"></el-table-column> -->
      <!-- 没有数据 -->
      <template #empty>
        <el-empty description="没有数据"></el-empty>
      </template>
    </el-table>
    <el-pagination
      v-model:current-page="params.pageCurrent"
      :page-size="params.pageSize"
      pager-count="2"
      background
      layout="jumper, total, prev, pager, next"
      :total="total"
      @current-change="onCurrentChange"
      style="margin-top: 50px; justify-content: flex-end"
    />
  </page-container>
</template>

<style lang="scss" scoped>
.container {
  border-radius: 20px;
  font-weight: bold;
  font-size: 17px;
}
.select-button {
  background-color: #077aee;
  color: #fff;
}
.install-button {
  background-color: #077aee;
  font-weight: bold;
  color: #fff;
}
.link {
  color: #077aee;

  font-weight: 800;
}
.el-button--text {
  color: #077aee;
  font-weight: 800;
}
.cloth-button {
  background-color: #077aee;
  font-weight: bold;
  color: #fff;
}
</style>
